<template>
  <div>

    <el-dialog title="请登录" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" modal>



      <el-form ref="form" :model="userInfo" label-width="80px" :rules="rules">
        <el-form-item label="登录名" prop="username">
          <el-input v-model="userInfo.username"></el-input>
        </el-form-item>

        <el-form-item label="密 码" prop="password">
          <el-input v-model="userInfo.password"></el-input>
        </el-form-item>
      </el-form>

      <div style="text-align: center;" v-if="loginLoading">
        拼命登录中 <i class="el-icon-loading"></i>
      </div>

      <div style="text-align: center; color: inherit">
        <p>
          管理员账号: admin / admin
        </p>
        <p>
          普通账号: test / test
        </p>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="clickLogin('form')">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    components: {},
    name: 'Login',
    data () {
      return {
        rules: {
          username: [
            { required: true, message: '请输入登录名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
        },

        dialogVisible: true,
        userInfo: {
          username: '',
          password: ''
        },
        loginLoading: false,

        flag: false
      }
    },
    methods: {
      handleClose(done) {
        if (this.flag) {
          return;
        }

        let router = this.$router;
        let flag = this.flag;
        let message = this.$message;
        let getLoginSession = this.getLoginSession;
        let th = this;
        this.$$get('/security/login')
          .then(res => {
            flag = false;
            if (res.data.code !== 0 || res.data.data !== 0) {
              document.title = '少侠，请先登录哈~';
              th.$message.warning('不要点我啦，直接登录吧');
            } else {
              getLoginSession(message);
              router.push('/');
            }
          });
      },
      clickLogin(form) {
        this.$refs[form].validate((valid) => {
          if (!valid) {
            return false;
          }
          this.userLogin();
        });
      },
      async userLogin() {
        this.loginLoading = true;
        let data = await this.$$post('/security/login', this.userInfo);
        if (this.checkResponse(data)) {
          this.$message.success('欢迎 ' + data.data.data.serviceName);
          this.dialogVisible = false;

          this.updateUserInfo();
          this.$router.push('/');
        }
        this.loginLoading = false;
      },
      async updateUserInfo() {
        let data = await this.$$get('/security/login/session');
        if (this.checkResponse(data)) {
          this.updateUserInfo2(data.data.data);
        }
      },

      getLoginSession(message) {
        let updateUserInfo2 = this.updateUserInfo2;
        this.$$get('/security/login/session')
          .then(res => {
            if (this.checkResponse(res)) {
              message.success('您已登陆，欢迎 ' + res.data.data.serviceName);
              updateUserInfo2(res.data.data);
            }
          })
      },
      updateUserInfo2(data) {
        this.$store.state.user.id = data.id;
        this.$store.state.user.serviceId = data.serviceId;
        this.$store.state.user.serviceName = data.serviceName;
        this.$store.state.user.memo = data.memo;
        this.$store.state.user.grade = data.grade;
      }
    }
  }
</script>

<style lang="less" scoped>
  i {
    font-size: 25px;
    color: red;
  }
</style>
